<template>
    <el-cascader
		:options="options.options"
		:props="options.props"
		:separator="options.separator"
		:popper-class="options['popper-class']"
		:placeholder="options['placeholder']"
		:disabled="options['disabled']"
		:clearable="options['clearable']==null?true:options['clearable']"
		:expand-trigger="options['expand-trigger']"
		:show-all-levels="options['show-all-levels']"
		:filterable="options['filterable']"
		:debounce="options['debounce']"
		:change-on-select="options['change-on-select']"
		:size="options['size']"
		:before-filter="options['before-filter']"

		@change="_change"
		@active-item-change="this['_active-item-change']"
		@blur="_blur"
		@focus="_focus"

		ref="cascader"
		v-model="val"
	></el-cascader>
</template>

<script>

    export default {
        props:{
        	options: {
        		default: Object,
				required: true,
			},
			value: {
        		required: true,
			}
		},
		computed:{
        	val:{
        		get(){
        			return this.value;
				},
				set(value){
        			this.$emit('input', value)
				}
			}
		},
		data(){
        	return {}
		},
		methods:{
			_change(value){
				this.$emit('change', value)
				this.options['@change'] && this.options['@change'](value);
			},
			'_active-item-change'(value){
				this.$emit('active-item-change', value)
				this.options['@active-item-change'] && this.options['@active-item-change'](value)
			},
			_blur(e){
				this.$emit('blur', e)
				this.options['@blur'] && this.options['@blur'](e);
			},
			_focus(e){
				this.$emit('focus', e)
				this.options['@focus'] && this.options['@focus'](e);
			}
		},
    }
</script>

<style scoped>

</style>
